<template>
  <div class="home">
      <!-- 搜索框 -->
      <div class="header_input">
        <van-search
          v-model="value"
          show-action
          autofocus="autofocus"
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
          @input="onInput"
        />
      </div>
      <div class="main_wrapper">
        <!-- 搜索历史及热门搜索 -->
        <div class="history_container" v-show="!isShow">
          <div class="title">搜索历史</div>
          <div class="content">
            <div class="item_container" 
            v-for="(item,index) in history" :key="index"
            @click="addHistory_history(item)"
            v-html="item">
              <!-- {{item}} -->
            </div>
          </div>
          <div class="title">热门搜索</div>
          <div class="content">
            <div class="item_container" 
            v-for="(item,index) in hotSearch" :key="index"
            @click="addHistory(item)">
              {{item.name}}
            </div>
          </div>
        </div>
        <!-- 高亮显示 -->
        <div class="content_container" v-show="isShow">
          <div class="light_item" 
          v-for="(item,index) in showDim" :key="index"
          v-html="item"
          @click="addHistory_history(item)"></div>
        </div>
      </div>
      
  </div>
</template>

<script>
import { Toast } from 'vant';
import axios from 'axios';

export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return {
      value:"",
      hotSearch:[],
      isShow:false,
      dimItems:[]
    }
  },
  computed:{
    history(){
      return this.$store.state.history
    },
    showDim(){
      var tempDim = []
      this.dimItems.forEach((ele)=>{
        if(ele.includes(this.value)){
          var redEle = ele.replace(this.value,`<span style="color:red">${this.value}</span>`)
          tempDim.push(redEle)
        }
      })

      return tempDim
    }


  },
  methods:{
    onSearch() {
      Toast(this.value);
      this.$store.dispatch('ADD_HISTORY',this.value)
      this.$store.dispatch('SEARCH_LIST',this.value)
      this.$router.push('/')
    },
    onCancel() {
      Toast('取消');
    },
    addHistory(item){
      this.$store.dispatch('ADD_HISTORY',item.name)
    },
    addHistory_history(item){
      this.$store.dispatch('ADD_HISTORY',item)
    },
    onInput(){
      if(this.value.length > 0){
        this.isShow = true
      }else {
        this.isShow = false
      }
    }
  },
  mounted(){
    // 搜索热词数据
    axios.get('http://localhost:8080/hotsearch.json').then((res)=>{
      console.log(res.data)
      this.hotSearch = res.data
    }).catch((error)=>{
      console.log(error)
    })
    // 高亮模糊搜索词
    axios.get('http://localhost:8080/dim.json').then((res)=>{
      console.log(res.data)
      this.dimItems = res.data
    }).catch((error)=>{
      console.log(error)
    })

  }
}
</script>

<style scoped>
  .home {
    width: 100%;
  }
  .header_input {
    width: 100%;
    height: 64px;
    /* border-bottom: 1px solid gray; */
  }
  .title {
    width: 100%;
    height: 50px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    color: green;
  }
  .main_wrapper {
    width: 94%;
    margin-left: 3%;
  }
  .content {
    width: 100%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .content .item_container {
    padding: 10px;
    margin: 10px;
    /* border: 1px solid gray; */
    border-radius: 8px;
    background-color: green;
    color: #fff;
  }
  .light_item {
    width: 100%;
    height: 40px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    text-indent: 3%;
  }

</style>
